<!doctype html>
<html>
	<head>
		<meta content="text/html;charset=utf-8" http-equiv="content-type" />
		<link rel="stylesheet" href="bubble.css" />
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-30210234-1']);
			_gaq.push(['_trackPageview']);
			(function() {
				var ga = document.createElement('script');
				ga.type = 'text/javascript';
				ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(ga, s);
			})();

		</script>
		<link rel="stylesheet" href="css.css" />
	</head>
	<body>
		<h1>纯Css3完美实现iphone玻璃透明气泡</h1>
		<h2>已兼容firefox和webkit，其他Css3浏览器稍微修改下应该就可以</h2>
		<div id="wraper1">
			<div style="height:20px;" ></div>
			<div style="text-align: left;padding-left:20px">
				<div class="bubble">
					<div class="content">
						你是谁啊？？我问你是谁啊？你到底说不说啊？你是谁啊？？我问你是谁啊？你到底说不说啊？你是谁啊？？我问你是谁啊？你到底说不说啊？
					</div>
				</div>
			</div>
		</div>
		<div id="wraper2">
			<div style="text-align: right;padding-right:20px;">
				<div class="bubble">
					<div class="content">
						啊？
					</div>
				</div>
			</div>
		</div>
		<div id="wraper3">
			<div style="text-align: left;padding-left:20px">
				<div class="bubble">
					<div class="content">
						算了我觉得我快神经病了！
					</div>
				</div>
			</div>
		</div>
		<div id="wraper4">
			<div style="text-align: right;padding-right:20px;">
				<div class="bubble">
					<div class="content">
						哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
					</div>
				</div>
			</div>
		</div>
<p align="center">适用浏览器：FireFox、Chrome、Safari、傲游、搜狗. 不支持IE8、360、Opera、世界之窗。</p>
<p align="center">来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
	</body>
</html>